<template>
  <div class="previousCell">
    <div v-for="bill in list" :key="bill.months" class="previousCell-bill">
      <!-- 表头:月份 -->
      <div class="previousCell-bill-header">
        <div
          class="previousCell-bill-header-title"
          :style="{ 'margin-bottom': '0' }"
        >
          {{ bill.months }}
        </div>
      </div>
      <!-- 列表 -->
      <div
        class="previousCell-list"
        v-for="(item, index) in bill.list"
        :key="item.sessionId"
        @click.stop="jumpPage(item)"
      >
        <div class="previousCell-list-topbg">
          <!-- 当前奖池  期数 -->
          <div class="items-center">
            <div class="previousCell-list-dqjc items-center">
              <span>{{ $t("lotteryMoney.jcjeValue") }}</span>

              <template v-if="item.periodId == item.sessionId">
                <img
                  v-if="globalStore.$state.language == 'VI'"
                  class="previousCell-list-dqjc-qs-tag"
                  src="/image/lotterymoney/super-icon1.svg"
                />
                <img
                  v-else-if="globalStore.$state.language == 'pt'"
                  class="previousCell-list-dqjc-qs-tag"
                  src="/image/lotterymoney/super-icon.svg"
                />
                <img
                  v-else
                  class="previousCell-list-dqjc-qs-tag"
                  src="/image/lotterymoney/super-icon2.svg"
                />
              </template>
            </div>
          </div>
          <!-- 奖池金额 -->
          <div class="previousCell-list-money items-center">
            <div class="previousCell-list-money-box">
              <span
                >$
                {{ toThousands(decimalToLength(item.lotteryPoolAmount)) }}</span
              >
              <span class="previousCell-list-money-bdc"
                >={{
                  toThousands(decimalToLength(item.lotteryPoolAmountValue, 0))
                }}BDC</span
              >
            </div>
            <div class="previousCell-list-money-qs items-center">
              <span>{{
                formatWithTimeZone(item.sessionTime, "Asia/Jakarta")
              }}</span>
              <img
                style="margin-left: 4px; height: 10px"
                src="/image/jt-right-icon.svg"
              />
            </div>
          </div>
        </div>

        <div class="previousCell-list-bottompbg">
          <!-- 参与人数 -->
          <div
            class="items-center previousCell-list-cyrs"
            style="margin-bottom: 7px"
          >
            <div class="items-center">
              {{ $t("lotteryMoney.cyrs") }}
            </div>
            <div class="previousCell-list-cyrs-value">
              {{ toThousands(item.totalUserCount) }}
            </div>
          </div>
          <!-- 下注数量 -->
          <div class="items-center previousCell-list-cyrs">
            <div class="items-center">
              {{ $t("lotteryMoney.xzsls") }}
            </div>
            <div class="previousCell-list-cyrs-value">
              {{ toThousands(item.totalDrawCount) }}
              {{ $t("lotteryMoney.xxz") }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="previousCell">
import { toThousands, decimalToLength, navigateI18nTo } from "@/utils";
import { useGlobalStore } from "~~/store/global";

const globalStore = useGlobalStore();
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    list: any;
  }>(),
  {
    list: [],
  }
);

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 期数格式化
const formatWithTimeZone = (date: any, timeZone: string) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "2-digit",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "2-digit",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "2-digit",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}${month}${day}`;
};

// 页面跳转
const jumpPage = (val: any) => {
  // 1. 埋点
  firebase?.logEvent("BDC_H5_previous_Detail_V3_Jump");
  // 2. 跳转
  navigateI18nTo({
    path: "/lottery-v3/previous-record-detail",
    query: {
      sessionId: val.sessionId,
    },
  });
};
</script>
<style scoped lang="scss">
.previousCell {
  padding-top: 10 * 2px;
  &-bill {
    border-radius: 12 * 2px;
    overflow: hidden;
    &-header {
      padding-bottom: 10 * 2px;
      &-title {
        display: inline-block;
        font-size: 15 * 2px;
        font-weight: 590;
        color: #141924;
        padding: 5 * 2px 15 * 2px;
      }
      &-text {
        font-size: 13 * 2px;
        color: #141924;
        padding-right: 10 * 2px;
      }
    }
  }

  &-list {
    position: relative;
    box-shadow: 12px 12px 48px 0px rgba(0, 0, 0, 0.03),
      -12px -12px 48px 0px rgba(0, 0, 0, 0.03);
    background-color: #fff;
    border-radius: 12 * 2px;

    margin: 0 15 * 2px 10 * 2px 15 * 2px;

    &-topbg {
      border-radius: 12 * 2px 12 * 2px 0 0;
      padding: 10 * 2px;
      background: linear-gradient(90deg, #fff 0%, #f2f8ff 50%, #fff 100%);
    }

    &-bottompbg {
      padding: 2 * 2px 10 * 2px 10 * 2px 10 * 2px;
    }
    &-cyrs {
      justify-content: space-between;
      font-size: 12 * 2px;
      color: #999da7;
      &-value {
        font-size: 12 * 2px;
        color: #007bff;
        font-weight: 510;
      }
    }
    &-dqjc {
      white-space: nowrap;
      color: #999da7;
      font-size: 12 * 2px;
      margin-bottom: 8 * 2px;
      &-qs {
        &-tag {
          margin-left: 8 * 2px;
          height: 14 * 2px;
        }
      }
    }

    &-money {
      justify-content: space-between;

      &-box {
        color: #fff;
        font-size: 15 * 2px;
        font-weight: 600;
        border-radius: 12px;
        background: linear-gradient(90deg, #007bff 0%, #00b2ff 100%);
        padding: 4 * 2px 8 * 2px;
      }
      &-bdc {
        margin-left: 4 * 2px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 12 * 2px;
        font-weight: 400;
      }
      &-qs {
        color: #999da7;
        font-size: 11 * 2px;
        font-weight: 510;
        border: 0.5px solid #999da7;
        border-radius: 4 * 2px;
        padding: 3 * 2px 9 * 2px;
      }
    }
  }
}
</style>
